<template>
  <div class="shoutStyle">
    <div class="footer">
      <ElButton style="margin-right: 5px" @click="resetForm()">取消</ElButton>
      <ElButton type="primary" @click="submitForm(ruleFormRef)">
        确定
      </ElButton>
    </div>
    <ElForm ref="ruleFormRef" :model="ruleForm" :rules="rules" class="search-color">
      <ElRow>
        <ElCol :span="24">
          <ElFormItem prop="megaphoneOperateLoop" label="播放模式">
            <span></span>
            <ElRadioGroup v-model="ruleForm.megaphoneOperateLoop">
              <ElRadio label="单次" :value="0" />
              <ElRadio label="循环" :value="1" />
            </ElRadioGroup>
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem prop="playVolume" label="喊话音量">
            <span></span>
            <div style="display: flex; align-items: center">
              <ElInput style="width: 80px" v-model.number="ruleForm.playVolume" placeholder="" />dB
            </div>
            <div class="airline-slider">
              <img src="/static/delete.png" @click="decreaseValue" :disabled="ruleForm.playVolume <= min"
                alt="" />

              <ElSlider v-model="ruleForm.playVolume" :min="min" :max="max"></ElSlider>

              <img @click="increaseValue" :disabled="ruleForm.playVolume >= max" src="/static/add.png"
                alt="" />
            </div>
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem label="喊话内容" :prop="activeName == '0' ? 'text' : 'megaphoneOperateFile'" style="display: block">
            <div style="width: 100%">
              <div class="airline-shout">
                <div class="tab-item fw-5" @click="activeName = '0'" :class="activeName == '0' ? 'tab-itemBg' : ''">
                  文本
                </div>
                <div class="fw-5" @click="activeName = '1'" :class="activeName == '1' ? 'tab-itemBg' : ''">
                  录音
                </div>
              </div>
            </div>

            <div style="width: 100%">
              <ElInput v-if="activeName == '0'" type="textarea" v-model="ruleForm.text" :rows="10" placeholder="请填写"
                style="background: #f0f2f5" />
              <div v-else style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 100%;
                  height: 220px;
                  background: #f0f2f5;
                  border: 1px solid #dcdfe6;
                  border-radius: 4px;
                ">
                <ElUpload action="" :before-upload="handleUpload" @change="handleUploadChange" :on-exceed="handleExceed"
                  :auto-upload="false" :limit="1">
                  <ElButton link type="primary">
                    <img class="sound" src="/static/soundrecording.png" alt="" />
                  </ElButton>
                  <template #tip>
                    <div class="el-upload__tip" style="text-align: center">
                      <span v-if="ruleForm.megaphoneOperateFile">{{
                        ruleForm.megaphoneOperateFile
                        }}</span>
                      <p v-else>只能上传.pcm格式的录音文件</p>
                    </div>
                  </template>
                </ElUpload>
              </div>
            </div>
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>
  </div>
</template>
<script lang="ts" setup>
import {
  ElDialog,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElScrollbar,
  ElCheckbox,
  ElRadioGroup,
  ElRadio,
  ElRadioButton,
  ElSlider,
  ElRow,
  ElCol,
  ElUpload,
} from 'element-plus';
import { reactive, ref, computed, watch } from 'vue';
import { router } from '#/router';
import { putPcmFile } from '#/api/system/oss';
const emit = defineEmits(['close', 'getShoutview']);
const dialogVisible = ref(false);
const ruleFormRef = ref();
const activeName = ref('0');
const min = ref(0); // 最小值
const max = ref(100); // 最大值
const ruleForm = reactive({
  megaphoneOperateLoop: 0,
  playVolume: 0,
  text: '',
  megaphoneOperateFile: '',
  megaphoneType: activeName.value, //0 文本 1录音
});
const rules = reactive({
  megaphoneOperateLoop: [
    { required: true, message: '请选择播放模式', trigger: ['change', 'blur'] },
  ],
  playVolume: [{ required: true, message: '请填写喊话音量', trigger: 'blur' }],
  text: [{ required: true, message: '请填写喊话内容', trigger: 'blur' }],
  megaphoneOperateFile: [
    { required: true, message: '请录入喊话内容', trigger: 'blur' },
  ],
});

const file = ref();

const handleUploadChange = (uploadFile: UploadFile) => {
  if (uploadFile.status === 'ready') {
    file.value = uploadFile;
    uploadLogoToServer();
  }
};

const handleUpload = (file: File) => {
  const validTypes = ['pcm'];
  if (!validTypes.includes(file.type)) {
    ElMessage.error('请上传 .pcm 格式的录音文件');
    return false;
  }

  if (file.size > 5 * 1024 * 1024) {
    ElMessage.error('文件大小超过5MB');
    return false;
  }
  return true;
};

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  upload.value!.handleStart(file);
};

const uploadLogoToServer = async () => {
  if (!file.value?.raw) return;

  const formData = {
    file: file.value.raw,
    path: file.value.raw.name,
  };

  try {
    const { data } = await putPcmFile(formData);
    ruleForm.megaphoneOperateFile = data.url;
  } catch (err) {
    ElMessage.error('上传失败');
  }
};

const props = defineProps({
  shoutList: Object,
});
const defaultList = computed(() => props.shoutList);
const decreaseValue = () => {
  if (ruleForm.playVolume > min.value) {
    ruleForm.playVolume -= 1;
  }
};
const increaseValue = () => {
  if (ruleForm.playVolume < max.value) {
    ruleForm.playVolume += 1;
  }
};
const submitForm = async (formEl) => {
  ruleForm.megaphoneType = activeName.value;
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 添加成功
      ElMessage({
        plain: true,
        message: '添加成功',
        type: 'success',
      });
      emit('getShoutview', ruleForm);
    } else {
      console.log('error submit!', fields);
    }
  });
};

const resetForm = () => {
  emit('close');
  dialogVisible.value = false;
};

watch(
  () => props.shoutList,
  (newVal) => {
    if (newVal) {
      ruleForm.megaphoneOperateLoop = newVal.megaphoneOperateLoop;
      ruleForm.playVolume = newVal.playVolume;
      ruleForm.text = newVal.text;
      ruleForm.megaphoneOperateFile = newVal.megaphoneOperateFile;
      ruleForm.megaphoneType = newVal.megaphoneType;
      activeName.value = newVal.megaphoneType;
    }
  },
  { deep: true, immediate: true },
);
</script>
<style scope lang="scss">
.shoutStyle {
  position: absolute;
  right: 18%;
  bottom: 10vh;
  z-index: 1;
  width: 500px;
  height: 70vh;
  color: #303133;
  background-color: #fff;
  border-radius: 4px;

  .search-color {
    padding: 0 10px 10px;
  }
}

.airline-shout {
  display: flex;
  width: 30%;
  margin: 10px 0;
  text-align: center;
  background: #f0f2f5;
  border: 1px solid #fff;
  border-radius: 4px;

  div {
    width: 50%;
    height: 30px;
    margin: 2px;
    font-size: 14px;
    line-height: 30px;
    background: #f0f2f5;
  }

  .tab-item {
    margin: 2px;
    border-right: none;
    border-radius: 2px;
  }

  .tab-itemBg {
    margin: 2px;
    color: #1989fa;
    background: #fff;
  }
}

.footer {
  padding: 10px;
  margin-bottom: 10px;
  text-align: right;
  border-bottom: 1px solid #dcdfe6;
}

.el-form-item__content {
  flex: initial;
  justify-content: space-between;
  width: 100%;
}

.airline-slider {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 10px 0;

  img {
    width: 16px;
    height: 16px;
    margin: 0 5px;
  }

  .el-slider__bar {
    background: linear-gradient(79deg, #00ccd0 0%, #3a6af0 100%);
    box-shadow: 0 0 8px 0 rgb(97 137 202 / 43%);
  }

  .el-slider__button {
    width: 11px;
    height: 11px;
    border: none;
  }
}

.sound {
  width: 52px;
  height: 52px;
  margin: auto;
}

.el-textarea__inner {
  background: #f0f2f5;
}

.el-upload {
  display: flex;
}
</style>
